/* 黑色导航栏 */
.black-nav{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
    font-size: 12px;
}
.con{
    width: 1226px;
    margin: 0 auto;
   /* background: blueviolet; */
}
.black-nav-left{
    float: left;
}
.black-nav li{
    float: left;
    position: relative;
}
.black-nav a{
    color: #b0b0b0;
    font-size: 12px;
}
.black-nav a:hover{
    color: #fff;
}
.black-nav span{
    color: #424242;
    margin: 0 3.6px;
}
.black-nav-right{
    float: right;
}
.car{
    width: 120px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #424242;
    margin-left: 25px; 
    transition: all 0.8s;
    position: relative;
    z-index:5555;
}
.car i{
    font-size: 17px;
    margin-right: 7px;
}
.car:hover{
    background: #ffffff;;
}
.car:hover a{
    color: #ff6700;
}

/* 购物车样式 */
.car-list{
    width: 316px;
    height: 0px;
    background-color: #fff;
    box-shadow:  0 2px 10px rgba(0,0,0,.15);
    position: absolute;
    right: 0px;
    top: 40px;
    /* display: none; */
    overflow: hidden;
    transition: all 0.8s;
}
.car:hover>.car-list{
   /* display: block; */
   height: 100px;
   line-height: 100px;
}
/* 下载APP出现二维码部分 */
.picture{
    width: 124px;
    height: 0px;
    background: #ffffff;
    box-shadow: 0 1px 5px #aaa;
    position: absolute;
    overflow: hidden;
    transition: all 0.8s;
    top: 40px;
    left: 50%;
    z-index: 6666;
    margin-left: -62px;
}
.picture>img{
    width: 90px;
    height: 90px;
   margin-top: 19px;
   margin-left: 15px;
}
.black-nav-left>li:hover>.picture{
    height: 148px;
}
.picture>p{
    color: #333;
    font-size: 14px;
    line-height: 40px;
    text-indent: 19px;
}
/* 下载APP里面的三角形 */
.triangle{
    width: 0px;
    height: 0px;
    border-bottom: 8px solid #ffffff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -8px;
    display: none;
}
.black-nav-left>li:hover>.triangle{
    display: block;
}
/* 白色导航栏的部分 */
.white-nav{
    width: 100%;
    height: 100px;
    /* background: pink; */
    position: relative;
}

.logo{
    width: 55px;
    height: 100px;
    /* background: forestgreen; */
    float: left;
}
.logo img{
    width:56px;
    height:56px;
    margin:25px 0;
}
.nav-bar{
    width: 702px;
    height: 100px;
    /* background: fuchsia; */
    float: left;
    margin-left: 173px;
}

.nav-bar>ul>li{
    height: 24px;
    float: left;
    padding: 38px 7px ;
}
.nav-bar a{
    font-size: 16px;
    color: #333333;
}
.nav-bar a:hover{
    color: #ff6700;
}
/* hover里面的内容开始 */
.box10{
    width: 180px;
    height: 166px;
    /* background: pink; */
    border-right: 1px solid #ccc;
    float: left;
   margin: 35px 0 12px 12px;
}
.box10 img{
    width: 160px;
    height: 110px;
}
.box11{
    width: 180px;
    height: 166px;
    /* background:pink; */
    border-right: 1px solid #ccc;
    float: left;
    margin: 35px 0 12px 12px;
}
.box11 img{
    width: 160px;
    height: 110px;
}
.box12{
    width: 180px;
    height: 166px;
    /* background:pink; */
    border-right: 1px solid #ccc;
    float: left;
    margin: 35px 0 12px 12px;
}
.box12 img{
    width: 160px;
    height: 110px;
}
.box13{
    width: 180px;
    height: 166px;
    /* background:pink; */
    border-right: 1px solid #ccc;
    float: left;
    margin: 35px 0 12px 12px;
}
.box13 img{
    width: 160px;
    height: 110px;
}
.box14{
    width: 180px;
    height: 166px;
    /* background:pink; */
    border-right: 1px solid #ccc;
    float: left;
    margin: 35px 0 12px 12px;
}
.box14 img{
    width: 160px;
    height: 110px;
}
.box15{
    width: 180px;
    height: 166px;
    /* background:pink; */
    float: left;
    margin: 35px 0 12px 12px;
}
.box15 img{
    width: 160px;
    height: 110px;
}
.box16{
    width: 180px;
    height: 166px;
    /* background:pink; */
    float: left;
    margin: 35px 0 12px 12px;
}
.box16 img{
    width: 160px;
    height: 110px;
}
.name5{
    font-size: 12px;
    color: #212121;
    text-align: center;
    line-height: 20px;
}

/* hover里面的内容结束 */
/* 搜索框的设置 */
.search{
    width: 296px;
    height: 100px;
    background: gray;
    float: right;
}
/* 小米手机下面的hover */
.nav-bar-list{
    width: 100%;
    height: 0px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 100px;
    z-index: 600;
    box-shadow: 0 3px 4px rgba(0,0,0,.18);
    /* border-top: 1px solid red;  */
    /* display: none;  */
    transition: all 0.8s;
    overflow: hidden;
    
}
.nav-bar>ul>li:hover>.nav-bar-list{
    display: block; 
    height: 229px;
    border-top: 1px solid #ccc; 
}
/* banner部分 */
.banner{
    width: 100%;
    height: 460px;
    /* background: powderblue; */
}
.banner-box{
    widows: 1226px;
    height: 460px;
    /* background: yellow; */
   background-image: url(../images/10.jpg);
    background-size: 100%;
    -webkit-animation: banner 20s linear infinite;
    position: relative;
}
.banner-box:hover{
    animation-play-state: paused;
}
@-webkit-keyframes banner{
    0%{
        background-image: url(../images/10.jpg);
    }
    25%{
        background-image: url(../images/6.jpg);
    }
    50%{
        background-image: url(../images/7.jpg);
    }
    75%{
        background-image: url(../images/8.jpg);
    }
    100%{
        background-image: url(../images/9.jpg);
    }
}
/* 滑动门的部分 */
.slide{
    width:234px;
    height:460px;
    background:rgba(105,101,101,.6);
    padding: 20px 0px;
    box-sizing: border-box;
    position: relative;
}
.slide>ul>li{
   width: 100%;
   height: 42px;
   padding-left: 30px;
   box-sizing: border-box;
   line-height: 42px;
   font-size: 14px;
}
.slide a{
    color: #fff;
}
.slide>ul>li:hover{
    background-color: #ff6700;
}
.slide i{
    font-size: 16px;
    color: #e0e0e0;
    float: right;
    margin-right: 20px;
}
.slide-list{
    width: 992px;
    height: 456px;
    background:#fff;
    border: 1px solid #e0e0e0;
    border-left: 0px;
    box-sizing: border-box;
    box-shadow:0 8px 16px rgba(0,0,0,.18);
    position: absolute;
    top: 0px;
    left: 234px;
    display: none;
    padding-top: 2px;
}
.slide-list3{
    width: 744.25px;
}
.slide-list4{
    width: 502.25px;
}
.slide>ul>li:hover>.slide-list{
    display: block;
}
.slide-list>ul{
    width: 247.75px;
    float: left; 
}
.slide-list li{
    height: 76px;
    line-height: 76px;
    /* background: red; */
}
.slide-list img{
    width: 40px;
    height: 40px;
    margin-right: 12px;
    margin-left: 20px;
    margin-top: 20px;
}
.slide-list a{
    font-size: 14px;
    color: #333;
}
.slide-list a:hover{
    color: #ff6700;
}
/* 滑动门的左右箭头 */
 .prev,.next{
    width: 41px;
    height: 69px;
   background: url(../images/icon-slides.png);
    position: absolute;
    top: 50%;
    margin-top: -34.5px;
}
.prev{
    left: 234px;
    background-position: -83px;
}
.next{
    right: 0px;
    background-position: -124px;
} 
.prev:hover{
    background-position: 0px;
}
.next:hover{
    background-position: -42px;
    
}
/* ad广告部分开始 */
.ad-left{
    width: 228px;
    height: 164px;
    padding: 3px;
    background: #757575;
    float: left;
}
.ad-img{
    width: 316px;
    height: 170px;
    background: red;
    float: left;
    margin-left: 14.6px;

}
.ad{
    padding: 14px 0px 26px;
    overflow: hidden;
}
.ad-img img{
    width: 100%;
}
.ad-left li{
    float: left;
    width: 76px;
    height: 82px;
    font-size: 12px;
    opacity: 0.7;
    padding: 19px 0px;
    box-sizing: border-box;
    text-align: center;
    transition: all 0.2s;
    position: relative;
}
.ad-left a{
    color: #fff;
}
.ad-left i{
    margin-bottom: 4px;
    display: block;
    font-size: 24px;
    text-align: center;
}
.ad-left li:hover{
    opacity: 1;
}
.row::before,.col::after{
    content: "";
    display: block;
    background-color: #665e57;
    position: absolute;
}
.row::before{
    width: 64px;
    height: 1px;
    bottom: 0;
    left: 6px;
}
.col::after{
    width: 1px;
    height: 70px;
    right: 0;
    top: 6px;
}
/* 主体内容部分 */
.container{
    width: 100%;
    background-color: #f5f5f5;
    padding: 4px 0 12px;
    overflow: hidden;
}
.title{
    font-size:22px;
    color: #333;
    font-weight: 200;
    line-height: 58px;
    text-align: left;
}
.iteams1{
    width: 234px;
    height: 300px;
    background-color: #fff;
    float: left;
    margin-left: 14px;
}
.flash-box>div{
    padding-top: 39px;
    border-top:1px solid #e53935;
}
.iteams1-left{
    margin-left: 0px;
}
.flash-box>div:nth-child(1){
    background-color: #f1eded;
}
.flash-box>div:nth-child(2){
    border-top-color: #00305c;
}
.flash-box>div:nth-child(3){
    border-top-color: #83c44e;
}
.flash-box>div:nth-child(4){
    border-top-color: #2196f3;
}
.flash-box>div:nth-child(5){
    border-top-color: #e53935;
}
.flash-box img{
    width: 160px;
    height: 166px;
    margin-bottom: 24px;
    text-align: center;
    margin-left: 35px;
}
.name1{
    width: 194px;
    height: 21px;
    margin:0 auto 3px;
    font-size: 14px;
    color: #212121;
    text-align: center;
}
.big-imges{
    width: 100%;
     height: 120px;
    margin: 22px 0; 
   background:url(../images/noto9.png);
}
.flash-box{
    overflow: hidden;
}
/* 手机开始 */
.all{
    font-size: 16px;
    float: right;
    color: #424242;
    transition: all 0.8s;
}
.all:hover{
    color: #ff6700;
}
.phone-box-left{
    width: 234px;
    height: 614px;
    /* background: #2196f3; */
    float: left;
}
.phone-box-right{
    width: 992px;
    height: 614px;
    /* background: #ccc; */
    float: left;
}
.iteams2{
    margin-bottom: 14px;
}
.goods-img{
    width: 160px;
    margin-top: 20px;
    margin-left: 39px;
    text-align: center;
}
.name2{
    width: 214px;
    height: 21px;
    margin-bottom: 2px;
    color: #333;
}
.disc1{
    height: 18px;
    margin: 0 auto 12px;
    color: #b0b0b0;
    font-size: 12px;
    width: 214px;
    margin-bottom: 10px;
    text-align: center;
}
.price1{
    font-size: 14px;
    color: #ff6700;
    text-align: center;
}
.phone-box-left img{
    width: 234px;
}
.claer{
    overflow: hidden;
}
.big-imges img{
    width: 100%;
}
/* 手机结束 */
/* 家电开始 */
.home{
    float: left;
}
.home-box{
    float: right;  
}
.iteams1-last>div{
    width: 100%;
    height: 143px;
    /* background:red; */
}
.iteams1-last>div:nth-child(1){
    margin-bottom: 14px;
    background: url(../images/00004.jpg) no-repeat 95px 41px;
}
.iteams1-last>div:nth-child(2){
    background: url(../images/2222_03.jpg) no-repeat 129px 35px;
}
.xiaomi{
    color: #333;
    font-size: 14px;
    font-weight: 400px;
    margin: 0 110px 5px 30px;
    text-align: center;
    padding-top: 50px;
}
.price15{
    font-size: 14px;
    color: #ff6700;
    text-align: center;
    margin: 0 110px 0px 30px;
}
.xiaomis{
    margin: 0 110px 0px 30px;
    color: #b0b0b0;
    font-size: 12px;
    text-align: center;
}
/* 家电结束 */
/* 搭配开始 */
.iteams1-last2>div{
    width: 100%;
    height: 143px;
}
.iteams1-last2>div:nth-child(1){
    margin-bottom: 14px;
    background: url(../images/00002.jpg) no-repeat 95px 41px;
}
.iteams1-last2>div:nth-child(2){
    background: url(../images/2222_03.jpg) no-repeat 129px 35px;
}
/* 搭配结束 */
/* 配件开始 */
.iteams1-last3>div{
    width: 100%;
    height: 143px;
}
.iteams1-last3>div:nth-child(1){
    margin-bottom: 14px;
    background: url(../images/00003.jpg) no-repeat 95px 25px;
}
.iteams1-last3>div:nth-child(2){
    background: url(../images/2222_03.jpg) no-repeat 129px 35px;
}
/* 配件结束 */
/* 周边开始 */
.iteams1-last4>div{
    width: 100%;
    height: 143px;
}
.iteams1-last4>div:nth-child(1){
    margin-bottom: 14px;
    background: url(../images/000004.jpg) no-repeat 106px 32px;
}
.iteams1-last4>div:nth-child(2){
    background: url(../images/2222_03.jpg) no-repeat 135px 35px;
}
/* 周边结束 */
/* 视频部分开始 */
.video-box>div{
    width: 296px;
    height: 285px;
    background-color: #fff;
    margin-bottom: 14px;
    float: left;
    margin-left: 14px;
    transition: all .2s linear;
}
.video-box>div:first-child{
    margin-left: 0;
}
.video-img{
    width: 100%;
    height: 180px;
    margin-bottom: 28px;
    position: relative;
}
.video-text{
    width: 268px;
    height: 21px;
    font-size: 14px;
    color: #333;
    margin: 0 auto 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.video-img>img{
    display: block;
    width: 100%;
    height: 180px;
}
.play{
    width: 32px;
    height: 20px;
    border: 2px solid #fff;
    border-radius:12px ;
    position: absolute;
    left: 20px;
    bottom: 10px;
    transition: all .2s;
}
.video-img:hover .play{
    background-color: #ff6700;
    border-color: #ff6700;
}
.play>div{
    width: 0;
    height: 0;
    border-left: 8px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin: 4px auto;
}
/* 视频部分结束 */

/* 预约维修部分开始 */
.footer-service{
    width: 100%;
    height: 25px;
    padding: 27px 0px;
    border-bottom: 1px solid #e0e0e0;
    /* background: red; */
}
.footer-service li{
    float: left;
    width: 19.8%;
    /* border-right: 1px solid #e0e0e0; */
   
}
.footer-service a{
    height: 25px;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    color: #333;
    transition: all 0.2s;
}
.footer-service a:hover{
    color: #ff6700;
}
.footer-service i{
    font-size: 24px;
    margin-right: 6px;
    position: relative;
    top: 3px;
}
.footer-link{
    width: 100%;
    height: 112px;
    padding: 40px 0px;
}
.footer-link ul{
    float: left;
    width: 160px;
    height: 112px;
    text-align: left;
}
.footer-link li{ 
   height: 18px;
   margin-top: 10px;  
}
.footer-link a{
    font-size: 12px;
    color: #757575;
    margin: -1px 0 11px;
}
.footer-link>ul>li:first-child{
    height: 17px;
    margin-bottom: 26px;
    margin-top: 0px;
    color: #424242;
    font-size: 14px;
}
.footer-link a:hover{
    color: #ff6700;
}
.contenct{
    width: 251px;
    height: 111px;
    border-left: 1px solid #e0e0e0;
    /* background: cornflowerblue; */
    float: right;
    text-align: center;
}
.phones{
    color: #ff6700;
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 5px;
}
.phones2{
    font-size: 12px;
    color: #616161;
    margin-bottom: 5px;
}
.kefu i{
    display: block;
    width: 118px;
    height: 28px;
    border: 1px solid #ff6700;
    font-size: 12px;
    color: #ff6700;
    box-sizing: border-box;
    line-height: 28px;
    margin-left: 53px;
}
.guanzhu{
    font-size: 12px;
    margin-top: 10px;
    color: #616161;
}
.footer-info{
    width: 100%;
    height: 232px;
    text-align: left;
    font-size: 14px;
    color: #333;
    clear: both;
    margin: 60px 0px;
}
.footer-info a{
    color: #757575;
}
.footer-info a:hover{
    color: #ff6700;
}
.p1{
    margin: 28px 0 14px;
    height: 22px;
}
.p1 span{
    margin: 0 3.5px;
}
.p2{
    margin: 14px 0;
    color: #b0b0b0;
    font-size: 12px;
}

.tupian img{
    width: auto;
    height: 28px;
    margin-left: 0px;
}
.footer-info.p1.p2.p3.tupian:hover{
    color: #ff6700;
}
/* 预约维修部分结束 */




